<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Header",
  data(){
    return {
      isCollapse:false
    }
  },
  methods:{
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
      this.$emit('update:isCollapse',this.isCollapse)
    }
  }
}
</script>

<template>
  <el-header style="display: flex; justify-content: space-between; font-size: 12px">
    <div>
      <el-button @click="handleCollapse">
        <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"/>
      </el-button>
    </div>
    <el-dropdown>
      <i class="el-icon-setting" style="margin-right: 15px"></i>
      <el-dropdown-menu>
        <el-dropdown-item>个人中心</el-dropdown-item>
        <el-dropdown-item>修改密码</el-dropdown-item>
        <el-dropdown-item @click.native="$router.back()">退出</el-dropdown-item>
      </el-dropdown-menu>
      <span>王小虎</span>
    </el-dropdown>
  </el-header>
</template>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  height: 60px;
  line-height: 60px;
}
</style>
